<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>腾讯智能制造云平台-首页</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <link href="css/style_responsive.css" rel="stylesheet" />
    <link href="css/style_default.css" rel="stylesheet" id="style_color" />
    <link rel="stylesheet" type="text/css" href="assets/uniform/css/uniform.default.css" />
    <link href="assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
    <!-- <link href="assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" /> -->
    <!-- <link href="assets/jqvmap/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" /> -->
</head>
<body class="fixed-top">
<!-- BEGIN HEADER -->
<div id="header" class="navbar navbar-inverse navbar-fixed-top">
    <!--
    BEGIN TOP NAVIGATION BAR
     头部导航 开始
     -->
    <div class="navbar-inner">
        <div class="container-fluid">
            <!-- BEGIN LOGO -->
            <a class="brand" href="index.html">
                <img src="img/logo.png" alt="Tencent" />
            </a>
            <!-- END LOGO -->
            <!-- BEGIN RESPONSIVE MENU TOGGLER -->
            <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="arrow"></span>
            </a>
            <div class="top-nav ">
                <ul class="nav pull-right top-menu" >
                    <!-- BEGIN SUPPORT -->
<!--                    <li class="dropdown mtop5">-->
<!--                        <a class="dropdown-toggle element" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Chat">-->
<!--                            <i class="icon-comments-alt"></i>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li class="dropdown mtop5">-->
<!--                        <a class="dropdown-toggle element" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Help">-->
<!--                            <i class="icon-headphones"></i>-->
<!--                        </a>-->
<!--                    </li>-->
                    <!-- END SUPPORT -->
                    <!-- BEGIN USER LOGIN DROPDOWN -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!--                            <img src="img/avatar1_small.jpg" alt="">-->
                            <i class="icon-user"></i>
                            <span class="username">admin</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
<!--                            <li><a href="#"><i class="icon-user"></i> My Profile</a></li>-->
<!--                            <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>-->
<!--                            <li><a href="#"><i class="icon-calendar"></i> Calendar</a></li>-->
<!--                            <li class="divider"></li>-->
                            <li><a href="/signout"><i class="icon-key"></i>退出</a></li>
                        </ul>
                    </li>
                    <!-- END USER LOGIN DROPDOWN -->
                </ul>
                <!-- END TOP NAVIGATION MENU -->
            </div>
        </div>
    </div>
    <!--
    END TOP NAVIGATION BAR
     头部导航结束
     -->
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div id="container" class="row-fluid">
    <!-- BEGIN SIDEBAR -->
    <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        <div class="sidebar-toggler hidden-phone"></div>
        <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
        <div class="navbar-inverse">
            <form class="navbar-search visible-phone">
                <input type="text" class="search-query" placeholder="Search" />
            </form>
        </div>
        <!-- END RESPONSIVE QUICK SEARCH FORM -->
        <!-- BEGIN SIDEBAR MENU -->
        <ul class="sidebar-menu">
            <li class="has-sub active">
                <a href="index.html" class="">
                    <span class="icon-box"> <i class="icon-dashboard"></i></span> 首页
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub ">
                <a href="pages/prodMgr.html" class="">
                    <span class="icon-box"> <i class="icon-book"></i></span>产品管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub ">
                <a href="pages/shebeiMgr.html" class="">
                    <span class="icon-box"><i class="icon-cogs"></i></span>设备管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub ">
                <a href="pages/orderMgr.html" class="">
                    <span class="icon-box"><i class="icon-tasks"></i></span>订单管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub ">
                <a href="pages/pdcplaMgr.html" class="">
                    <span class="icon-box"><i class="icon-fire"></i></span>生产计划管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub ">
                <a href="pages/pdcsdMgr.html" class="">
                    <span class="icon-box"><i class="icon-map-marker"></i></span>生产调度管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub ">
                <a href="pages/pdcOrdTck.html" class="">
                    <span class="icon-box"><i class="icon-file-alt"></i></span>生产订单跟踪
                    <span class="arrow"></span>
                </a>
            </li>
        </ul>
        <!-- END SIDEBAR MENU -->
    </div>
    <!-- END SIDEBAR -->
    <!-- BEGIN PAGE -->
    <div id="main-content">
        <!-- BEGIN PAGE CONTAINER-->
        <div class="container-fluid">
            <!-- BEGIN PAGE HEADER-->
            <div class="row-fluid">
                <div class="span12">
                    <!-- BEGIN THEME CUSTOMIZER-->
                    <div id="theme-change" class="hidden-phone">
                        <i class="icon-cogs"></i>
                        <span class="settings">
                                <span class="text">Theme:</span>
                                <span class="colors">
                                    <span class="color-default" data-style="default"></span>
                                    <span class="color-gray" data-style="gray"></span>
                                    <span class="color-purple" data-style="purple"></span>
                                    <span class="color-navy-blue" data-style="navy-blue"></span>
                                </span>
							</span>
                    </div>
                    <!-- END THEME CUSTOMIZER-->
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title">
                        当前位置
                        <small> 首页 </small>
                    </h3>
                    <ul class="breadcrumb">
                        <li>
                            <a href="#"><i class="icon-home"></i></a><span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="index.html">首页</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="pages/prodMgr.html">产品管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="pages/shebeiMgr.html">设备管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="pages/orderMgr.html">订单管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="pages/pdcplaMgr.html">生产计划管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="pages/pdcsdMgr.html">生产调度管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="pages/pdcOrdTck.html">生产订单跟踪</a><span class="divider-last">&nbsp</span>
                        </li>
                        <li class="pull-right search-wrap">
                            <form class="hidden-phone">
                                <div class="search-input-area">
                                    <input id=" " class="search-query" type="text" placeholder="搜索">
                                    <i class="icon-search"></i>
                                </div>
                            </form>
                        </li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div id="page" class="dashboard">
                <!-- BEGIN OVERVIEW STATISTIC BLOCKS-->
                <div class="row-fluid circle-state-overview">
                    <div class="span2 responsive" data-tablet="span3" data-desktop="span2">
                        <div class="circle-stat block">
                            <div class="visual">
                                <div class="circle-state-icon">
                                    <i class="icon-user turquoise-color"></i>
                                </div>
                                <input class="knob" data-width="100" data-height="100" data-displayPrevious=true  data-thickness=".2" value="35" data-fgColor="#4CC5CD" data-bgColor="#ddd">
                            </div>
                            <div class="details">
                                <div class="number" id="newUser">0</div>
                                <div class="title">新用户</div>
                            </div>
                        </div>
                    </div>
                    <div class="span2 responsive" data-tablet="span3" data-desktop="span2">
                        <div class="circle-stat block">
                            <div class="visual">
                                <div class="circle-state-icon">
                                    <i class="icon-tags red-color"></i>
                                </div>
                                <input class="knob" data-width="100" data-height="100" data-displayPrevious=true  data-thickness=".2" value="65" data-fgColor="#e17f90" data-bgColor="#ddd"/>
                            </div>
                            <div class="details">
                                <div class="number" id="badRate">0%</div>
                                <div class="title">故障率</div>
                            </div>
                        </div>
                    </div>
                    <div class="span2 responsive" data-tablet="span3" data-desktop="span2">
                        <div class="circle-stat block">
                            <div class="visual">
                                <div class="circle-state-icon">
                                    <i class="icon-shopping-cart green-color"></i>
                                </div>
                                <input class="knob" data-width="100" data-height="100" data-displayPrevious=true  data-thickness=".2" value="30" data-fgColor="#a8c77b" data-bgColor="#ddd"/>
                            </div>
                            <div class="details">
                                <div class="number" id="neworder">0</div>
                                <div class="title" >新订单</div>
                            </div>
                        </div>
                    </div>
                    <div class="span2 responsive" data-tablet="span3" data-desktop="span2">
                        <div class="circle-stat block">
                            <div class="visual">
                                <div class="circle-state-icon">
                                    <i class="icon-comments-alt gray-color"></i>
                                </div>
                                <input class="knob"  data-width="100" data-height="100" data-displayPrevious=true  data-thickness=".2" value="15"  data-fgColor="#b9baba" data-bgColor="#ddd"/>
                            </div>
                            <div class="details">
                                <div class="number">100%</div>
                                <div class="title">运行率</div>
                            </div>
                        </div>
                    </div>
                    <div class="span2 responsive" data-tablet="span3" data-desktop="span2">
                        <div class="circle-stat block">
                            <div class="visual">
                                <div class="circle-state-icon">
                                    <i class="icon-eye-open purple-color"></i>
                                </div>
                                <input class="knob" data-width="100" data-height="100" data-displayPrevious=true  data-thickness=".2" value="45" data-fgColor="#c8abdb" data-bgColor="#ddd"/>
                            </div>
                            <div class="details">
                                <div class="number">+987</div>
                                <div class="title">访问人数</div>
                            </div>
                        </div>
                    </div>
                    <div class="span2 responsive" data-tablet="span3" data-desktop="span2">
                        <div class="circle-stat block">
                            <div class="visual">
                                <div class="circle-state-icon">
                                    <i class="icon-bar-chart blue-color"></i>
                                </div>
                                <input class="knob" data-width="100" data-height="100" data-displayPrevious=true  data-thickness=".2" value="25" data-fgColor="#93c4e4" data-bgColor="#ddd"/>
                            </div>
                            <div class="details">
                                <div class="number">478</div>
                                <div class="title">报表</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--                 END OVERVIEW STATISTIC BLOCKS-->
                <div class="row-fluid">

                    <div class="span6">
                        <div class="widget">

                            <div class="widget-title">

                                <h4><i class="icon-reorder"></i>Donut Chart</h4>

                                <span class="tools">

									<a href="javascript:;" class="icon-chevron-down"></a>

                                    <a href="javascript:;" class="icon-remove"></a>

									</span>

                            </div>

                            <div class="widget-body">

                                <div id="donutChart" class="chart"></div>

                            </div>

                        </div>
                    </div>
                    <div class="span6">
                        <div class="widget">

                            <div class="widget-title">

                                <h4><i class="icon-reorder"></i>Bar Chat</h4>

                                <span class="tools">
			
							<a href="javascript:;" class="icon-chevron-down"></a>

                            <a href="javascript:;" class="icon-remove"></a>

							</span>

                            </div>

                            <div class="widget-body">

                                <div id="barChart" class="chart"></div>

                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <!-- END PAGE CONTENT-->
        </div>
        <!-- END PAGE CONTAINER-->
    </div>
    <!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div id="footer">
    2019 &copy; 腾讯.智能制造.云平台
    <div class="span pull-right">
        <span class="go-top"><i class="icon-arrow-up"></i></span>
    </div>
</div>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.blockui.js"></script>
<!-- ie8 fixes -->
<!--[if lt IE 9]>
<script src="js/excanvas.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
<script src="assets/flot/jquery.flot.js"></script>
<script src="assets/flot/jquery.flot.resize.js"></script>
<script src="assets/flot/jquery.flot.pie.js"></script>
<script src="assets/flot/jquery.flot.stack.js"></script>
<script src="assets/flot/jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="assets/uniform/jquery.uniform.min.js"></script>
<script src="assets/fancybox/source/jquery.fancybox.pack.js"></script>

<!--<script src="assets/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js"></script>-->
<!--<script src="assets/jquery-slimscroll/jquery.slimscroll.min.js"></script>-->
<!--<script src="assets/fullcalendar/fullcalendar/fullcalendar.min.js"></script>-->
<!--<script src="js/jquery.cookie.js"></script>-->
<!--<script src="assets/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>-->
<!--<script src="assets/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>-->
<!--<script src="assets/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>-->
<!--<script src="assets/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>-->
<!--<script src="assets/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>-->
<!--<script src="assets/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>-->
<!--<script src="assets/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>-->
<!--<script src="js/jquery.peity.min.js"></script>-->


<script src="assets/jquery-knob/js/jquery.knob.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/scripts.js"></script>
<script>

    //发起请求获取7天内的新用户
    $.ajax({
        type: 'GET',
        url: '/getNewUser',
        dataType: "json",
        success : function(data){
            $("#newUser").text("+"+data);
        },
        error : function(mes){
            console.log("error:"+mes);
        }
    });

    $.ajax({
        type: 'GET',
        url: '/selectNewOrder',
        dataType: "json",
        success : function(data){
            $("#neworder").text("+"+data);
        },
        error : function(mes){
            console.log("error:"+mes);
        }
    });


    //发起请求获取设备故障率
    $.ajax({
        type: 'GET',
        url: '/selectRate',
        dataType: "json",
        success : function(data){
            $("#badRate").text(data+"%");
        },
        error : function(mes){
            console.log("error:"+mes);
        }
    });

    jQuery(document).ready(function() {
        // initiate layout and plugins
        // App.setMainPage(true);
        App.init();
    });

    var statusNum10=null;
    var statusNum40=null;
    var statusNum20=null;
    var statusNum30=null;
    var statusNum50=null;
    $.ajax({
    type:"get",
    url:"selectOrderSum",
    dataType:"json",
    async:false,
    success:function(tsmcpProductOrderSumList){
        statusNum10=tsmcpProductOrderSumList[0].orderStatusSum;
        statusNum40=tsmcpProductOrderSumList[1].orderStatusSum;
        statusNum20=tsmcpProductOrderSumList[1].orderStatusSum;
        statusNum30=tsmcpProductOrderSumList[1].orderStatusSum;
        statusNum50=tsmcpProductOrderSumList[1].orderStatusSum;
    }
    });

    //首页饼状图表
    // 基于准备好的div，初始化echarts实例
    var donutChart = echarts.init(document.getElementById('donutChart'));
    // 指定图表的配置项和数据

    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            y:'center',
            data:['待接单','生产中','已接单','已排产','已完成']
        },
        series: [
            {
                name:'工厂订单',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:statusNum10, name:'待接单'},
                    {value:statusNum40, name:'生产中'},
                    {value:statusNum20, name:'已接单'},
                    {value:statusNum30, name:'已排产'},
                    {value:statusNum50, name:'已完成'}
                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    donutChart.setOption(option);

    //首页柱状图表
    // 基于准备好的div，初始化echarts实例
    var barChart = echarts.init(document.getElementById('barChart'));
    // 指定图表的配置项和数据
    option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'订单数量',
                type:'bar',
                barWidth: '60%',
                data:[5, 5, 4, 3, 4, 3, 2, 4, 3, 2 , 1, 1]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    barChart.setOption(option);




</script>

<!-- END JAVASCRIPTS -->
</body>
</html>